<!--
 * @Author: lizhen
 * @Date: 2021-12-22 18:25:35
 * @LastEditors: lizhen
 * @LastEditTime: 2021-12-31 14:45:20
 * @Description: 
-->
<template>
	<view class="login">
		<image class="login-img" :src="imgPath + '/login-img.png'" mode="aspectFill" />
		<view class="login-tips">欢迎使用药坚持</view>
		<view class="btn-box" @tap="isCheckHandle">
			<button :class="['login-auth-btn', !isCheck ? 'disabled' : '']" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
				<view class="login-btn">
					<image class="login-btn-img" :src="imgPath + '/login-chat.png'" mode="aspectFill" />
				</view>
			</button>
		</view>
		<g-protocol-check @onchange="changeHandle">
			<view class="agreement-title">
				我已同意
				<text @tap="goAgreementHandle" style="color: #34a4d9">《用户注册协议》</text>
			</view>
		</g-protocol-check>
	</view>
</template>
<script>
import authPhone from '@/utils/mixins/authPhone'
import {bindPhoneApi} from '@/service/userinfoApi.js'
export default {
	mixins: [authPhone],
	data() {
		return {
			isCheck: false,
			imgPath: this.$config.PUBLIC_IMG_PATH,
		}
	},
	methods: {
		goAgreementHandle() {
			uni.navigateTo({
				url: `/packageA/pages/webviewcontent/webviewcontent?type=login-agreement`,
			})
		},
		changeHandle(value) {
			this.isCheck = value
		},
		isCheckHandle() {
			if (!this.isCheck) this.$utils.showToast('请先勾选同意协议')
		},
		async onGetPhoneNumber(e) {
			// 验证手机格式
			let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
			//调用接口
			let phone = await this.authPhoneNumber(e)
			if (!myreg.test(phone)) {
				this.$utils.showToast('获取手机号失败')
			} else {
				let res = await bindPhoneApi(phone.length == 11 && phone)
				if (phone && res.code == 100) {
					let userInfo = this.$utils.getStorage('userInfo')
					this.$utils.setStorage('userInfo', {...userInfo, userType: 2})
					uni.switchTab({
						url: '/pages/home/home',
					})
				}
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.login {
	&-img {
		@include width-hight(300, 300);
		margin: 160rpx 50% 40rpx;
		transform: translateX(-50%);
	}
	&-btn {
		width: 100%;
		height: 100%;
		background-color: $color-green;
		border-radius: 8rpx;
	}
}
.login-auth-btn {
	@include width-hight(496, 88);
	margin: 0 auto 30rpx;
	padding: 0;
	border: 0 none;
}

.login-tips {
	@include font-size(36, 500);
	color: $text-title;
	text-align: center;
	margin-bottom: 138rpx;
}
.login-btn-img {
	@include width-hight(272, 50);
	margin: 19rpx 112rpx;
}
.agreement-title {
	@include font-size(28);
	letter-spacing: 0.1225px;
	color: $text-title;
	margin-left: 8rpx;
}
.disabled {
	pointer-events: none;
}
</style>
